<template>
	<view class="order-card">
		<view class="card_items" @click="toDetail(orderItem)">
			<view class="contents">
				<view class="titles">
					<view class="task">
						{{type || '暂无类型'}}
					</view>
					<view class="Claim"  v-if="todohis"
						:style="{'color': orderItem.type == 2 ? '#428FFC' : '#00B853'}"
						:class="{'acclaim' :  this.index ==index }">
						{{orderItem.type == 2 ? '预警中' :'已处置' }}
					</view>
					<view class="Claim" @click.stop="taketask(orderItem)" v-else
						:style="{'color': orderItem.orderType == 0 ? '#fff' : '#363A44','background-color': orderItem.orderType == 0 ? '#428FFC' : '#E8E9EC'}"
						:class="{'acclaim' :  this.index ==index }">
						{{orderItem.orderType == 0 ? '认领' :'已认领' }}
					</view>
				</view>
				<view class="" style="display: flex;" >
					<view class="">
						<view class="item">
							<view class="field">
								当前处置进度
							</view>
							<view class="content_">
								{{orderItem.nodeName || '暂无'  }}
							</view>
						</view>
						<view class="item">
							<view class="field">
								{{type=='车队预警' ? '卡口' : '车牌'}}
							</view>
							<view class="content_"  >
								{{getcarnumber}}
							</view>
						</view>
						<view class="item">
							<view class="field">
								地点
							</view>
							<view class="content_">
								{{'详情可见' || '暂无数据' }}
							</view>
						</view>
					</view>
					<view class="">
							<img class="pho" :src="imgs.url || empty "
								@click="previewPic(imgs.url)" alt="">
					</view>
				</view>
				<view class="item">
					<view class="field">
						预警时间
					</view>
					<view class="content">
						{{yjtime}}
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getWordOrder,
		sceneList,
		getMyList,
		getTakeTask
	} from '@/pages/api/orderp/orderp.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		props:{
			orderItem:{
				type:Object,
				default:{}
			},
			todohis:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				getcarnumber:'',
				yjtime:'',
				location:'',
				imgs:[],
				type:'',
				empty:'/static/zanwu.png'
			}
		},
		mounted() {
			
		
			this.orderItem.formValue.forEach((d,i)=>{
				console.log(d,i)
				if(d.display_name=='类型'){
					 this.type =  d[d.name] 
				}
				if(d.display_name=='车牌'){
					 this.getcarnumber =  d[d.name] 
				}
				if(d.display_name=='时间'){
					
					 this.yjtime =  d[d.name] 
				}
				if(d.display_name=='位置'){
					
					 this.location =  d[d.name] 
				}
				if(d.display_name=='图片'){
					if(d[d.name]){
						 this.imgs =  d[d.name][0]
					}else{
						 this.imgs=''
					}
					
				}
			})
		},
		methods: {
			...mapMutations('enforce_law', ['setInfoItem']),
			toDetail() {
				this.$emit('gotoDetail', this.orderItem)
			},
			//认领跳转
			taketask(item) {
				if (item.orderType == 0) {
					uni.showModal({
						title: '提示',
						content: '是否确定领取？',
						confirmText: '确定',
						cancelText: '取消',
						success: res => {
							if (res.confirm) {
								this.setInfoItem(item)
								getTakeTask({
									id: item.recordId
								}).then(res => {
									this.$emit('taketask', this.orderItem)
									this.$refs.uToast.show({
										title: '认领成功！',
										type: 'success',
										duration: 500,
										url: '/pages/index/listCard/workorderList/detailList'
									})
								})
							}
						}
					});
				} else {
						this.$refs.uToast.show({
							title: '您已认领',
							type: 'warming',
							duration: 500,
						})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-card {
		.card_items {
			margin: 0 26rpx 26rpx 26rpx;
			height: 400rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-left: 13rpx solid #428FFC;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);

			.contents {
				padding: 22rpx;

				.titles {
					display: flex;
					justify-content: space-between;

					.task {
						color: #428FFC;
						font-size: 36rpx;
						font-weight: 800;
					}

					.Claim {
						z-index: 99;
						text-align: center;
						height: 48rpx;
						width: 148rpx;
						font-size: 28rpx;
						line-height: 48rpx;
					}

					.acclaim {
						background-color: #E8E9EC;
						color: #363A44;
					}
				}

				.tips {
					color: #428FFC;
					font-weight: 600;
					font-size: 28rpx;
					margin-top: 16rpx;
				}

				.line {
					margin-top: 32rpx;
					height: 1px;
					width: 100%;
					background-color: #E8E9EC;
				}

				.item {
					display: flex;
					margin-top: 32rpx;
					font-size: 32rpx;

					.field {
						width: 199rpx;
						color: #B3B5B9;
						margin-right: 12rpx;
					}

					.content {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						width: 300rpx;
						color: #363A44;
					}
					.content_ {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						width: 230rpx;
						color: #363A44;
					}
				}
			}
		}
	}
	img{
		height: 200rpx;
		width: 200rpx;
		// margin-left: -50rpx;
	}
</style>
